<template>
  <div class="score_service">
    <div class="tab_nav">
      <div :class="activeTab === 0? 'item_nav active': 'item_nav'" @click="activeTab = 0">会员</div>
      <div :class="activeTab === 1? 'item_nav active': 'item_nav'" @click="activeTab = 1">VIP会员</div>
    </div>
    <div v-if="activeTab === 0" class="tab_body">
      <div class="tab_item"  data-index="2">
        <div class="title_name">会员</div>
<!--        <div class="span_type"><img src="../../../assets/img/modules/score/icon_3.png" alt="">待解锁</div>-->
      </div>
      <div class="icon_list" data-index="2">
        <div class="icon_item" @click="showModel(1)">
          <img src="../../../assets/img/modules/score/icon_v2_2.png" alt="">
          <p>分享有礼</p>
        </div>
        <div class="icon_item" @click="showModel(2)">
          <img src="../../../assets/img/modules/score/icon_v2_4.png" alt="">
          <p>积分兑换</p>
        </div>
        <div class="icon_item" @click="showModel(3)">
          <img src="../../../assets/img/modules/score/icon_v2_6.png" alt="">
          <p>助学金</p>
        </div>
        <div class="icon_item" @click="showModel(4)">
          <img src="../../../assets/img/modules/score/icon_v2_5.png" alt="">
          <p>圆币商城</p>
        </div>
        <div class="icon_item" @click="showModel(5)">
          <img src="../../../assets/img/modules/score/icon_v2_1.png" alt="">
          <p>咨询1对1</p>
        </div>
        <div class="icon_item" @click="showModel(6)">
          <img src="../../../assets/img/modules/score/icon_v2_3.png" alt="">
          <p>0元公开课</p>
        </div>
      </div>
    </div>
    <div v-if="activeTab === 1" class="tab_body">
      <div class="tab_item"  data-index="1">
        <div class="title_name">VIP会员</div>
<!--        <div class="span_type"><img src="../../../assets/img/modules/score/icon_18.png" alt="">已升级</div>-->
      </div>
      <div class="icon_list" data-index="1">
        <div class="icon_item" @click="showModel(7)">
          <img src="../../../assets/img/modules/score/icon_v2_7.png" alt="">
          <p>工会补贴一键申领</p>
        </div>
        <div class="icon_item" @click="showModel(8)">
          <img src="../../../assets/img/modules/score/icon_v2_8.png" alt="">
          <p>工会培训活动</p>
        </div>
      </div>
    </div>
    <!--弹窗-->
    <div v-show="model_show" class="model_list">
      <swiper :options="swiperServiceNav" ref="swiperServiceNav" class="swiper_nav_img">
        <swiper-slide class="swiper-slide-home">
          <img src="../../../assets/img/modules/score/icon_v2_2.png" alt="">
          <p>分享有礼</p>
        </swiper-slide>
        <swiper-slide class="swiper-slide-home">
          <img src="../../../assets/img/modules/score/icon_v2_4.png" alt="">
          <p>积分兑换</p>
        </swiper-slide>
        <swiper-slide class="swiper-slide-home">
          <img src="../../../assets/img/modules/score/icon_v2_6.png" alt="">
          <p>助学金</p>
        </swiper-slide>
        <swiper-slide class="swiper-slide-home">
          <img src="../../../assets/img/modules/score/icon_v2_5.png" alt="">
          <p>圆币商城</p>
        </swiper-slide>
        <swiper-slide class="swiper-slide-home">
          <img src="../../../assets/img/modules/score/icon_v2_1.png" alt="">
          <p>咨询1对1</p>
        </swiper-slide>
        <swiper-slide class="swiper-slide-home">
          <img src="../../../assets/img/modules/score/icon_v2_3.png" alt="">
          <p>0元公开课</p>
        </swiper-slide>
        <swiper-slide class="swiper-slide-home">
          <img src="../../../assets/img/modules/score/icon_v2_7.png" alt="">
          <p>工会补贴一键申领</p>
        </swiper-slide>
        <swiper-slide class="swiper-slide-home">
          <img src="../../../assets/img/modules/score/icon_v2_8.png" alt="">
          <p>工会培训活动</p>
        </swiper-slide>
      </swiper>
      <swiper :options="swiperServiceTab" ref="swiperServiceTab" class="swiper_nav_tab">
        <swiper-slide class="swiper-slide-tab">
          <div class="tab_item">
            <div class="title_name">分享有礼</div>
            <div class="title_h3">1.服务对象</div>
            <div class="serve_text_body">
              <img data-index="member" src="../../../assets/img/modules/score/icon_v2_10.png" alt="">
              <img data-index="vip" src="../../../assets/img/modules/score/icon_v2_9.png" alt="">
            </div>
            <div class="title_h3">2.权益说明</div>
            <div class="serve_text_body">
              <p>邀请好友关注公众号并完成注册，可得积分和圆币。</p>
            </div>
            <div class="title_h3">3.使用指南</div>
            <div class="serve_text_body">
              <p>在本公众号点击「我的」-「会员中心」或对应APP「我的」页面，点击「分享有礼」分享给好友，好友成功报读可的圆币。</p>
            </div>
<!--            <button class="open_url" data-index="0">去看看</button>-->
          </div>
        </swiper-slide>
        <swiper-slide class="swiper-slide-tab">
          <div class="tab_item">
            <div class="title_name">积分兑换</div>
            <div class="title_h3">1.服务对象</div>
            <div class="serve_text_body">
              <img data-index="member" src="../../../assets/img/modules/score/icon_v2_10.png" alt="">
              <img data-index="vip" src="../../../assets/img/modules/score/icon_v2_9.png" alt="">
            </div>
            <div class="title_h3">2.权益说明</div>
            <div class="serve_text_body">
              <p>通过参加活动、互动和学习等方式获得积分，积分可兑换助学金券和公开课券。</p>
            </div>
            <div class="title_h3">3.使用指南</div>
            <div class="serve_text_body">
              <p>在本公众号点击「我的」-「个人中心」或对应APP「我的」页面，点击「积分兑换」兑换。</p>
            </div>
          </div>
        </swiper-slide>
        <swiper-slide class="swiper-slide-tab">
          <div class="tab_item">
            <div class="title_name">助学金</div>
            <div class="title_h3">1.服务对象</div>
            <div class="serve_text_body">
              <img data-index="member" src="../../../assets/img/modules/score/icon_v2_10.png" alt="">
              <img data-index="vip" src="../../../assets/img/modules/score/icon_v2_9.png" alt="">
            </div>
            <div class="title_h3">2.权益说明</div>
            <div class="serve_text_body">
              <p>助学金券用于学费的减免，报读时直接减免学费。</p>
            </div>
            <div class="title_h3">3.使用指南</div>
            <div class="serve_text_body">
              <p>在本公众号或对应APP可通过活动或积分兑换领取助学金券，报读时可以享受学费减免。</p>
            </div>
<!--            <button class="open_url" data-index="1">去看看</button>-->
<!--            <button class="open_url" data-index="2">去看看</button>-->
          </div>
        </swiper-slide>
        <swiper-slide class="swiper-slide-tab">
          <div class="tab_item">
            <div class="title_name">圆币商城</div>
            <div class="title_h3">1.服务对象</div>
            <div class="serve_text_body">
              <img data-index="member" src="../../../assets/img/modules/score/icon_v2_10.png" alt="">
              <img data-index="vip" src="../../../assets/img/modules/score/icon_v2_9.png" alt="">
            </div>
            <div class="title_h3">2.权益说明</div>
            <div class="serve_text_body">
              <p>通过邀请好友成功报读获得圆币，圆币可兑换商品。</p>
            </div>
            <div class="title_h3">3.使用指南</div>
            <div class="serve_text_body">
              <p>在本公众号点击「我的」-「会员中心」或对应APP「我的」页面，打开「圆币商城」选择心仪的商品兑换吧，限量福利，先到先得。</p>
            </div>
          </div>
        </swiper-slide>
        <swiper-slide class="swiper-slide-tab">
          <div class="tab_item">
            <div class="title_name">咨询1对1</div>
            <div class="title_h3">1.服务对象</div>
            <div class="serve_text_body">
              <img data-index="member" src="../../../assets/img/modules/score/icon_v2_10.png" alt="">
              <img data-index="vip" src="../../../assets/img/modules/score/icon_v2_9.png" alt="">
            </div>
            <div class="title_h3">2.权益说明</div>
            <div class="serve_text_body">
              <p>专业老师一对一咨询服务，及时解决你学习、选学、报读等多种困惑。</p>
            </div>
            <div class="title_h3">3.使用指南</div>
            <div class="serve_text_body">
              <p>在本公众号或对应APP点击选学时可咨询老师。服务时间：周一至周五：9点 - 20点；周末节假：10点 - 20点提供在线咨询及电话咨询服务。</p>
            </div>
          </div>
        </swiper-slide>
        <swiper-slide class="swiper-slide-tab">
          <div class="tab_item">
            <div class="title_name">0元公开课</div>
            <div class="title_h3">1.服务对象</div>
            <div class="serve_text_body">
              <img data-index="member" src="../../../assets/img/modules/score/icon_v2_10.png" alt="">
              <img data-index="vip" src="../../../assets/img/modules/score/icon_v2_9.png" alt="">
            </div>
            <div class="title_h3">2.权益说明</div>
            <div class="serve_text_body">
              <p>行业大咖的线上精品公开课，涵盖了学历教育，技能提升等多个领域，免费学习。</p>
            </div>
            <div class="title_h3">3.使用指南</div>
            <div class="serve_text_body">
              <p>在本公众号点击「发现」或对应APP菜单「发现」，即可免费观看。</p>
            </div>
<!--            <button class="open_url" data-index="2">去看看</button>-->
          </div>
        </swiper-slide>
        <swiper-slide class="swiper-slide-tab">
          <div class="tab_item">
            <div class="title_name">工会补贴一键申领</div>
            <div class="title_h3">1.服务对象</div>
            <div class="serve_text_body">
              <img data-index="vip" src="../../../assets/img/modules/score/icon_v2_9.png" alt="">
            </div>
            <div class="title_h3">2.权益说明</div>
            <div class="serve_text_body">
              <p>仅需根据补贴申请要求提交相关资料即可同步到职工教育网，申领更方便。</p>
            </div>
            <div class="title_h3">3.使用指南</div>
            <div class="serve_text_body">
              <p>领取工会补贴券后，可以在本公众号或对应APP会员中心-我的卡包使用补贴券，根据提示填写申请表及相关辅助资料。经过各级工会审核通过后，补贴将会发放到您的账号中。</p>
            </div>
<!--            <button class="open_url" data-index="1"   @click="$router.push({ path:'/subsidy-login', query:{ gsign: $store.state.score.gsign }})">去看看</button>-->
          </div>
        </swiper-slide>
        <swiper-slide class="swiper-slide-tab">
          <div class="tab_item">
            <div class="title_name">工会培训活动</div>
            <div class="title_h3">1.服务对象</div>
            <div class="serve_text_body">
              <img data-index="vip" src="../../../assets/img/modules/score/icon_v2_9.png" alt="">
            </div>
            <div class="title_h3">2.权益说明</div>
            <div class="serve_text_body">
              <p>国开在线联合职工教育网提供各级工会发放的各种专项培训，工会会员可免费享受。</p>
            </div>
            <!--<div class="title_h3">3.使用指南</div>
            <div class="serve_text_body">
              <p>在国开广州实验在线公众号菜单或广州实验学院APP报读后，完成学籍注册成为学员，可通过APP线上完成补考预约，目前公众号学习服务暂无开放。</p>
            </div>-->
          </div>
        </swiper-slide>
      </swiper>
      <img class="out_model" src="../../../assets/img/modules/score/icon_19.png" alt="" @click="model_show = false">
    </div>
  </div>
</template>
<script>
export default {
  name: 'service',
  components: {},
  data () {
    return {
      activeTab: 0,
      model_show: false,
      swiperServiceNav: {
        slidesPerView: 3.8,
        loop: true,
        loopedSlides: 8,
        spaceBetween: 0,
        centeredSlides: true
      },
      swiperServiceTab: {
        slidesPerView: 1.2,
        loop: true,
        loopedSlides: 8,
        spaceBetween: 10,
        centeredSlides: true
      }
    }
  },
  props: {},
  watch: {},
  methods: {
    /*
     *@author wf_Huang
     *@Time 2019/8/6 0006 11:11
     *@function  显示弹窗
     *****************************************/
    showModel (index) {
      this.model_show = true
      this.$nextTick(function () {
        this.$refs.swiperServiceNav.swiper.slideTo(index + 7, 1000, true)
      })
    }
  },
  computed: {},
  created () {
  },
  mounted () {
    this.$nextTick(() => {
      const swiperNav = this.$refs.swiperServiceNav.swiper
      const swiperTab = this.$refs.swiperServiceTab.swiper
      swiperNav.controller.control = swiperTab
      swiperTab.controller.control = swiperNav
    })
    if (this.$route.query.gsign) {
      this.$store.state.gsign = this.$route.query.gsign
      localStorage.setItem('stateData', JSON.stringify(this.$store.state))
    }
  },
  destroyed () {
  }
}
</script>

<style lang="scss" scoped>
  .score_service {
    .tab_nav{
      display: flex;
      justify-content: center;
      box-shadow: 0 0 2px #E5E5E5;
      .item_nav{
        flex: 1;
        font-size: 30px;
        color: #666666;
        letter-spacing: 0;
        line-height: 80px;
        text-align: center;
        position: relative;
        font-family: PingFangSC-Regular;
        -webkit-transition: font-size 0.1s;
        -moz-transition: font-size 0.1s;
        -ms-transition: font-size 0.1s;
        -o-transition: font-size 0.1s;
        transition: font-size 0.1s;
        &:after{
          content: '';
          background-color: transparent;
          -webkit-transition: background-color 0.3s;
          -moz-transition: background-color 0.3s;
          -ms-transition: background-color 0.3s;
          -o-transition: background-color 0.3s;
          transition: background-color 0.3s;
        }
      }
      .active{
        font-size: 30px;
        color: #222222;
        font-weight: bold;
        &:nth-child(2){
          &:after{
            content: '';
            position: absolute;
            height: 3px;
            background-color: #D98C1F;
            width: 180px;
            bottom: -3px;
            left: 50%;
            -webkit-transform: translate(-50%,-50%);
            -moz-transform: translate(-50%,-50%);
            -ms-transform: translate(-50%,-50%);
            -o-transform: translate(-50%,-50%);
            transform: translate(-50%,-50%);
          }
        }
        &:nth-child(1){
          &:after{
            content: '';
            position: absolute;
            height: 3px;
            background-color: #C7161D;
            width: 180px;
            bottom: -3px;
            left: 50%;
            -webkit-transform: translate(-50%,-50%);
            -moz-transform: translate(-50%,-50%);
            -ms-transform: translate(-50%,-50%);
            -o-transform: translate(-50%,-50%);
            transform: translate(-50%,-50%);
          }
        }

      }
    }
    .tab_body{
      .tab_item{
        width: 698px;
        height: 390px;
        margin: 32px auto;
        position: relative;
        &[data-index='0']{
          background: url('../../../assets/img/modules/score/icon_20.png') no-repeat center;
          background-size: 100% 100%;
        }
        &[data-index='1']{
          background: url('../../../assets/img/modules/score/icon_16.png') no-repeat center;
          background-size: 100% 100%;
        }
        &[data-index='2']{
          background: url('../../../assets/img/modules/score/icon_2.png') no-repeat center;
          background-size: 100% 100%;
        }
        .title_name{
          font-family: PingFangSC-Semibold;
          font-size: 44px;
          color: #FFFFFF;
          letter-spacing: 0;
          line-height: 44px;
          font-weight: bold;
          position: absolute;
          top: 50px;
          left: 70px;
        }
        .span_type{
          font-family: PingFangSC-Medium;
          font-size: 28px;
          color: #FFFFFF;
          letter-spacing: 0;
          line-height: 28px;
          position: absolute;
          bottom: 80px;
          left: 70px;
          display: flex;
          img{
            width: 28px;
            height: 28px;
            margin-right: 10px;
            display: inline-block;
          }
        }
      }
      .icon_list{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        justify-items: center;
        padding: 0 70px;
        .icon_item{
          width: 33.333%;
          text-align: center;
          margin-bottom: 50px;
          img{
            width: 100px;
            height: 100px;
            display: block;
            margin: 0 auto 20px;
          }
          p{
            font-family: PingFangSC-Regular;
            font-size: 24px;
            color: #999999;
            letter-spacing: 0;
            text-align: center;
            line-height: 24px;
            margin: 0;
          }
        }
      }
      .btn_footer{
        padding: 80px 32px 50px;
        .open_show{
          border-radius: 4px;
          font-family: PingFangSC-Regular;
          font-size: 32px;
          color: #FFFFFF;
          letter-spacing: 0;
          text-align: center;
          line-height: 96px;
          border: 0;
          width: 100%;
          &[data-index='0']{
            background: #027FFE;
          }
          &[data-index='1']{
            background: #D98C1F;
          }
          &[data-index='2']{
            background: #C7161D;
          }
        }
      }
    }
    .model_list{
      overflow: hidden;
      background-color: rgba(0,0,0,0.9);
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      .out_model{
        display: block;
        margin: 0 auto;
        width: 64px;
        height: 64px;
      }
      .swiper_nav_img{
        margin-top: 60px;
        img{
          width: 100px;
          height: 100px;
          display: block;
          margin: 0 auto;
        }
        .swiper-slide-home{
          opacity: 0.8;
          p{
            font-family: PingFangSC-Regular;
            font-size: 24px;
            color: #999999;
            letter-spacing: 0;
            text-align: center;
            line-height: 24px;
            margin: 0;
            margin-top: 10px;
          }
        }
        .swiper-slide-active{
          opacity: 1;
          p{
            color: #FFFFFF;
          }
        }
      }
      .swiper_nav_tab{
        margin: 0px 0 45px;
        .swiper-slide-tab{
          padding-top: 40px;
          display: flex;
          -webkit-box-pack: center;
          -ms-flex-pack: center;
          -webkit-justify-content: center;
          justify-content: center;
          -webkit-box-align: center;
          -ms-flex-align: center;
          -webkit-align-items: center;
          align-items: center;
          transition: 300ms;
          transform: scale(0.95);
        }
        .swiper-slide-active{
          transform: scale(1);
        }
        .tab_item{
          width: 100%;
          background: #FFFFFF;
          border-radius: 30px;
          min-height: 870px;
          margin:  0 auto;
          position: relative;
          padding: 47px;
          &:after{
            content: '◆';
            position: absolute;
            font-size: 80px;
            top: 0px;
            left: 50%;
            display: inline-block;
            transform: translate(-50%, -50%);
            color: #FFFFFF;
          }
          .title_name{
            font-family: PingFangSC-Semibold;
            font-size: 48px;
            color: #222222;
            letter-spacing: 0;
            line-height: 48px;
            margin-bottom: 50px;
          }
          .title_h3{
            font-family: PingFangSC-Semibold;
            font-size: 28px;
            color: #666666;
            letter-spacing: 0;
            line-height: 28px;
            margin: 10px auto;
          }
          .serve_text_body{
            display: flex;
            flex-wrap: wrap;
            margin-bottom: 30px;
            img{
              display: block;
              margin-right: 10px;
              &[data-index="vip"]{
                width: 142px;
                height: 38px;
              }
              &[data-index="member"]{
                width: 98px;
                height: 38px;
              }
            }
            p{
              font-family: PingFangSC-Regular;
              font-size: 26px;
              color: #666666;
              letter-spacing: 0;
              line-height: 35px;
              margin: 5px 0;
            }
          }
          .open_url{
            border-radius: 4px;
            line-height: 96px;
            width: 100%;
            font-size: 32px;
            letter-spacing: 0;
            text-align: center;
            background-color: #FFFFFF;
            &[data-index='0']{
              color: #027FFE;
              border: 1px solid #027FFE;
            }
            &[data-index='1']{
              color: #D98C1F;
              border: 1px solid #D98C1F;
            }
            &[data-index='2']{
              color: #C7161D;
              border: 1px solid #C7161D;
            }
          }
        }
      }
    }
  }
</style>
